<template>
  <div v-loading="loading" class="padding flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <year-month-picker v-model="time" :allow-date="false"></year-month-picker>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="clickSearch">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-1 overflow-auto dark-table-wrapper">
      <el-table
        :data="lists"
        height="100%"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
      >
        <div slot="empty" class="empty-lists">
          <i class="i-custom:search"></i>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column type="index" label="排名"></el-table-column>
        <el-table-column
          v-for="(column, index) in columns"
          :key="column.prop"
          v-bind="column"
          :align="index === 0 ? 'left' : 'center'"
        >
          <template v-if="needWrapUnit(column.label)" #header>
            <div class="wrap-unit-in-thead-name">{{ wrapUnit(column.label).name }}</div>
            <div class="wrap-unit-in-thead-unit">{{ wrapUnit(column.label).unit }}</div>
          </template>
          <template v-if="column.prop === 'districtName'" #default="{ row }">
            <el-link
              :underline="false"
              type="primary"
              @click="navigateToEnterpriseAnalysis(row)"
            >
              {{ row.districtName }}
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import YearMonthPicker, { getTimeTypeFromTime } from '@/components/year-month-picker';
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis';
import MixinWrapUnitInThead from '@/mixins/wrap-unit-in-thead';

import { getAreaEnergyUseRank } from '@/api/energy';
import { defaultNumber } from '@/utils';

export default {
  name: 'energy-efficiency-analysis-consumption-rank',
  components: {
    YearMonthPicker,
  },
  mixins: [Navigate2enterpriseAnalysis, MixinWrapUnitInThead],
  data() {
    return {
      loading: false,
      time: '',
      lists: [],
      columns: [],
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.user.theme;
    },
    timeType () {
      return getTimeTypeFromTime(this.time);
    }
  },
  mounted() {
    this.getLists();
  },
  methods: {
    async getLists() {
      this.loading = true;
      try {
        const { data } = await getAreaEnergyUseRank({
          timeType: this.timeType,
          time: this.time
        });
        this.columns = data.thead || [];

        const keys = ['districtName', 'districtCode'];
        (data.tbody || []).forEach(item => {
          Object.keys(item).forEach(key => {
            if (!keys.includes(key)) {
              item[key] = defaultNumber(item[key]);
            }
          })
        });
        this.lists = data.tbody || [];
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }
    },
    clickSearch() {
      this.getLists();
    }
  }
};
</script>
